<!DOCTYPE html>
<html>
<head>
	<title>获取元素</title>
</head>
<script type="text/javascript">
	
// var div = document.getElementById('box');
// console.dir(div);

// 此时不会返回null 而是返回元素对象，对象中不包含li
var li = document.getElementsByTagName('li');
console.dir(li);

</script>
<body>
<div id="box">
	<h1>获取元素</h1>
	<ul class="list">
		<li>事件1</li>
		<li>事件2</li>
	</ul>
	<p>结束</p>
</div>
<ul class="list">
	<li>另一个li</li>
	<li>另一个li</li>
	<li>另一个li</li>
</ul>
</body>
<script type="text/javascript">
	
// 1. document.getElementById 		不会动态匹配元素
var div = document.getElementById('box');
console.dir(div);


// 2. document.getElementsByTagName 会动态匹配到元素
console.dir(li);
// 获取id为box下的所有li
li = div.getElementsByTagName('li');
console.dir(li);



// 3. document.getElementsByClassName
var list = document.getElementsByClassName('list');
console.dir(list);


// 4. document.querySelector 			只会获取第一个匹配的元素
var diva = document.querySelector('div ul');
console.dir(diva);


// 4. document.querySelectorAll 		会获取匹配到所有的元素
var diva = document.querySelectorAll('div ul');
console.dir(diva);

</script>
</html>